import { useEffect, useRef, useState } from "react"
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
const RichEditor = ({ id, value, onChange, deliveryWay }) => {
  const editorContainer = useRef(null)
  const [content, setContent] = useState('')
  const [quill, setQuill] = useState(null)
  value = content
  useEffect(() => {
    if (editorContainer.current) {
      setQuill(new Quill(editorContainer.current, {
        theme: 'snow',
        placeholder: '请输入文章内容'
      }))
    }
    return () => {
      if (editorContainer.current) {
        editorContainer.current = null
      }
    }
  }, [])

  if (quill) {
    const setRichContet = (content) => {
      quill.clipboard.dangerouslyPasteHTML(content, 'api')
    }
    deliveryWay(setRichContet)
    quill.on('text-change', () => {
      // 获取父文本编辑器内容的html格式
      setContent(quill.getSemanticHTML())
      onChange(quill.getSemanticHTML())
    })
  }

  return (
    <div id={id} ref={editorContainer} className="editor" style={{ minHeight: '300px' }}>

    </div>
  )
}
export default RichEditor